<template>
  <img v-if="isTitle" src="@/assets/xinshuoImages/line.png" alt="" style="width: 100%" />
  <div class="box">
    <div class="seq">
      <div class="line1"></div>
      <div class="txt">总结会</div>
      <div class="line2"></div>
    </div>
    <div class="center">
      <div class="videoBox">
        <Title title="总结会视频" img-url="titleLogo1.png"></Title>
        <div class="videoFix">
          <video class="video" :src="videoUrl" muted autoplay controls loop></video>
          <!-- 定位状态 -->
          <div class="fixStatus">
            <div v-for="item in statusArr.status1" :key="item" class="oneStatus">
              <TitleAndstatus :title="item" />
            </div>
          </div>
        </div>
      </div>
      <div class="banner">
        <!-- title -->
        <TitleAndLogo
          :show-two="true"
          title="人员点名正常"
          img-url1="AI.png"
          img-url2="A-face.png"
          style="width: 223px"
        />
        <!-- 轮播 486-->
        <el-carousel :interval="3000" arrow="always" indicator-position="none">
          <el-carousel-item v-if="imgPeoples.bannerConclude1">
            <div class="images">
              <div v-for="(item, index) in imgPeoples.bannerConclude1" :key="index" class="imgBox">
                <img :src="urls.getAssetsFile(`${item.imgUrl}`)" alt="" />
                <p class="name">{{ item.name }}</p>
                <p class="bcgTitle">{{ item.bcgTitle }}</p>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item v-if="imgPeoples.bannerConclude2">
            <div class="images">
              <div v-for="(item, index) in imgPeoples.bannerConclude2" :key="index" class="imgBox">
                <img :src="urls.getAssetsFile(`${item.imgUrl}`)" alt="" />
                <p class="name">{{ item.name }}</p>
                <p class="bcgTitle">{{ item.bcgTitle }}</p>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item v-if="imgPeoples.bannerConclude3">
            <div class="images">
              <div v-for="(item, index) in imgPeoples.bannerConclude3" :key="index" class="imgBox">
                <img :src="urls.getAssetsFile(`${item.imgUrl}`)" alt="" />
                <p class="name">{{ item.name }}</p>
                <p class="bcgTitle">{{ item.bcgTitle }}</p>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item v-if="imgPeoples.bannerConclude4">
            <div class="images">
              <div v-for="(item, index) in imgPeoples.bannerConclude4" :key="index" class="imgBox">
                <img :src="urls.getAssetsFile(`${item.imgUrl}`)" alt="" />
                <p class="name">{{ item.name }}</p>
                <p class="bcgTitle">{{ item.bcgTitle }}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
        <TitleAndLogo title="会后总结开展正常" img-url1="toTxt.png" style="width: 223px" />
      </div>
      <!-- download -->
      <div class="downBox">
        <div class="top">
          <TitleAndLogo title="本次作业记录" style="width: 160px" />
          <div class="downAll" @click="downAll">
            <img src="@/assets/xinshuoImages/download.png" alt="" />
            <p>全部下载</p>
          </div>
        </div>
        <div class="bottom">
          <div
            v-for="(item, index) in downList"
            :key="item"
            :class="['one', confirmIndex == index ? 'active' : '']"
            @click="comfirmFn(index)"
          >
            <!-- 定位上方已确认 -->
            <div :class="['confirm', index == 4 && imgPeoples.bannerConclude3 ? 'confirm2' : 'confirm1']">
              {{ index == 4 && imgPeoples.bannerConclude3 ? item.confirm2 : item.confirm1 }}
            </div>
            <!-- PDF链接 -->
            <a
              :href="item.url"
              target="_blank"
              :class="['txt', 'txt1', confirmIndex == index ? 'activeTxt' : '']"
              :title="item.txt1"
            >
              {{ item.txt1 }}
            </a>
            <div class="right">
              <p class="txt txt2">{{ item.txt2 }}</p>
              <div class="downAll downOne" @click="downOne(item.wordUrl, item.txt1)">
                <img src="@/assets/xinshuoImages/download.png" alt="" />
                <p>下载</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue'
import urls from '@/utils/url'
const { proxy } = getCurrentInstance()
// 滚动间隔线
let props = defineProps({
  isTitle: {
    type: Boolean,
    default: true,
  },
  videoUrl: {
    type: String,
    default: '',
  },
  // 人员轮播
  imgPeoples: {
    type: Object,
    default: () => {},
  },
  downList: {
    type: Array,
    default: () => [],
  },
})
// 视频
let statusArr = reactive({
  status1: ['点名正确'],
})

let confirmIndex = ref()
const comfirmFn = (index) => {
  confirmIndex.value = index
}
// 下载
const downOne = (url, name) => {
  if (url && name) {
    proxy.$common.fileDownloadLocal(`${url}`, `${name}`)
  }
}
// 一键下载
const downAll = async () => {
  var fileUrls = [
    '/files/班组管理综合台账.docx',
    '/files/工器具出入库记录本.docx',
    '/files/生产物资出入库记录本.docx',
    '/files/现场防护通话记录.docx',
  ] // 指定要下载的文件路径

  for (var i = 0; i < fileUrls.length; i++) {
    var fileUrl = fileUrls[i]
    var fileName = fileUrl.substring(fileUrl.lastIndexOf('/') + 1)
    proxy.$common.fileDownloadLocal(fileUrl, fileName)
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  margin-top: 20px;
  height: 432px;
  .seq {
    margin-left: 24px;
    margin-right: 42px;
    .txt {
      width: 54px;
      height: 26px;
      font-size: 18px;
      font-family:
        Source Han Sans CN-Bold,
        Source Han Sans CN;
      font-weight: 700;
      color: #111111;
      line-height: 26px;
      margin: 17px 0;
    }
    .line1 {
      margin: auto;
      height: 148px;
      width: 2px;
      background: #1d6be1;
    }
    .line2 {
      margin: auto;
      height: 175px;
      width: 2px;
      background: #1d6be1;
    }
  }
  .center {
    display: flex;
    width: calc(100% - 120px);
    .videoBox {
      width: 33.4%;
    }
    .videoFix {
      width: 100%;
      position: relative;
      margin-top: 20px;
      .video {
        object-fit: cover;
        width: 100%;
        height: 279px;
      }
    }
    .fixStatus {
      display: flex;
      align-items: center;
      position: absolute;
      top: 6px;
      right: 6px;
      .oneStatus {
        margin-right: 16px;
        &:last-child {
          margin-right: 0;
        }
      }
    }

    .banner {
      margin-left: 3%;
      width: 47%;
      margin-left: 3%;
      margin-right: 26px;
      .title {
        display: flex;
      }
      :deep(.el-carousel__container) {
        height: 230px;
        margin-bottom: 16px;
      }
      .images {
        display: flex;
        width: 86.69%;
        margin: auto;
        height: 99%;
        .imgBox {
          margin-right: 3%;
          width: 33%;
          text-align: center;
          box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.2);
          background: url('@/assets/xinshuoImages/bannerBcg.png') no-repeat center/130% 280px;
          &:last-child {
            margin-right: 0;
          }
          > img {
            width: 94.6%;
            height: 141px;
          }
          .name {
            margin: 8px 0;
          }
          .bcgTitle {
            font-size: 18px;
            font-family:
              Source Han Sans CN-Medium,
              Source Han Sans CN;
            font-weight: 500;
            color: #1d6be1;
            height: 33px;
            background: rgba(29, 107, 225, 0.1);
            border-radius: 0px 0px 0px 0px;
          }
        }
      }
      :deep(.el-carousel__arrow i) {
        width: 0;
        height: 0;
      }
      :deep(.el-carousel__arrow--left) {
        border-radius: 0;
        width: 25px;
        height: 44px;
        background: url('@/assets/xinshuoImages/leftArrow.png') no-repeat center/100% 100%;
        left: 2px !important;
      }
      :deep(.el-carousel__arrow--right) {
        border-radius: 0;
        width: 25px;
        height: 44px;
        background: url('@/assets/xinshuoImages/rightArrow.png') no-repeat center/100% 100%;
        right: 2px !important;
      }
    }
  }
}
.downBox {
  width: 33%;
  .top {
    height: 36px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .downAll {
    display: flex;
    align-items: center;
    cursor: pointer;
    > p {
      font-family:
        Source Han Sans CN-Medium,
        Source Han Sans CN;
      font-weight: 500;
      color: #1d6be1;
    }
  }
  .one {
    width: 100%;
    height: 52px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: url('@/assets/xinshuoImages/downBcgGray.png') no-repeat center/100% 100%;
    position: relative;
    flex: 1 1 0;
    &:hover {
      background: url('@/assets/xinshuoImages/downBcgBlue.png') no-repeat center/107% 115%;
      color: #1d6be1;
    }
    .txt {
      height: 20px;
      line-height: 20px;
      margin-top: 6px;
      font-size: 14px;
      font-family:
        Source Han Sans CN-Regular,
        Source Han Sans CN;
      font-weight: 400;
      // color: #111111;
      width: 50%;
    }

    .txt1 {
      padding-left: 12px;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .txt2 {
      color: #111111;
    }
    .right {
      display: flex;
      justify-content: space-around;
      width: 50%;
    }
    // .activeTxt {
    //   color: #1d6be1;
    // }
    .confirm {
      font-size: 12px;
      font-family:
        Source Han Sans CN-Regular,
        Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      padding-left: 12px;
      position: absolute;
      top: 0;
    }
    .confirm1 {
      width: 66px;
      height: 16px;
      background: url('@/assets/xinshuoImages/blueConfim.png') no-repeat center/100% 100%;
    }
    .confirm2 {
      width: 158px;
      background: url('@/assets/xinshuoImages/shangbaoDate.png') no-repeat center/100% 100%;
    }
  }
  .downOne {
    font-size: 14px;
    margin-top: 3px;
    img {
      width: 12px;
      margin-right: 2px;
    }
  }
  // .active {
  //   width: 100%;
  //   height: 52px;
  //   background: url('@/assets/xinshuoImages/downBcgBlue.png') no-repeat center/107%
  //     115%;
  // }
}
</style>
